
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/component/pear/css/pear.css" />
</head>
<body>
    <form class="layui-form" action="">
        <div class="mainBox">
            <div class="main-container">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>生成基础表--无需填写表前缀{$prefix}</legend>
                  </fieldset>
                <div class="layui-form-item">
                    <label class="layui-form-label">基础表名</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" style="width: 300px;" placeholder="示例:home_news" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">中文备注</label>
                    <div class="layui-input-block">
                        <input type="text" name="desc"  style="width: 300px;" placeholder="示例:新闻" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">新增字段</label>
                    <div class="layui-form-label-col">
                       已包含默认字段：id，create_time，update_time，delete_time
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">+</label>
                    <div class="layui-form-label-col">
                    <table class="layui-table" style="width: 80%;">
                        <thead>
                          <tr>
                            <th>字段名称</th>
                            <th style="width: 250px !important">字段类型</th>
                            <th>长度</th>
                            <th>备注</th>
                            <th> 操作1</th>
                          </tr> 
                        </thead>
                        <tbody>
                          <tr>
                            <td><input type="text"  id="zdname" maxlength="25"  class="layui-input layui-input-inline"></td>
                            <td> <select  id='zdtype' lay-filter="zdtype">
                                <option value=""></option>
                                <option value="int">int</option>
                                <option value="bigint">bigint</option>
                                <option value="tinyint">tinyint</option>
                                <option value="varchar">varchar</option>
                                <option value="text">text</option>
                                <option value="timestamp">timestamp</option>
                              </select> </td>
                              <td><input type="number" maxlength="5"   id="zdcd" style="width:100px" class="layui-input layui-input-inline"></td>
                            <td><input type="text"  maxlength="15"  id="zdbeizhu" class="layui-input layui-input-inline"></td>
                            <td><button type="button" id="addzd" class="layui-btn layui-btn-normal layui-btn-sm" >
                                <i class="layui-icon layui-icon-add-1"></i>
                               新增
                            </button></td>
                          </tr>
                          <tbody id="zdtr"></tbody>
                        </tbody>
                      </table>

                    
                    </div>
                </div>
                
            </div>
        </div>
       
        <div class="bottom">
        <div class="button-container">
          
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
<script>
layui.use(['form','jquery'],function(){
    let form = layui.form;
    let $ = layui.jquery;
    let zdstr=[];
    form.on('submit(save)', function(data){
        data.field.zdstr=zdstr;
       // console.log(data,'提交了');
        //return false;
        $.ajax({
            data:JSON.stringify(data.field),
            dataType:'json',
            contentType:'application/json',
            type:'post',
            success:function(res){
                console.log(res);
               
                if (res.code==200) {
                    layer.msg(res.msg,{icon:1,time:1000},function(){
                        parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                        parent.layui.table.reload("dict-type-table");
                    });
                }else{
                    layer.msg(res.msg,{icon:2,time:1000});
                }
            }
        })
        return false;
    });
    form.on('select(zdtype)', function(data){
        var val=data.value;
        if(val=="int" || val=="bigint")
        {
            $("#zdcd").val(11);
        }
        if(val=="varchar")
        {
            $("#zdcd").val(255);
        }
        if(val=="tinyint")
        {
            $("#zdcd").val(1);
        }
        if(val=="timestamp" || val=="text")
        {
            $("#zdcd").val(0);
        }
    });
    $(document).on('click','#addzd',function(){
        var zdname=$("#zdname").val();
        var zdtype=$("#zdtype").val();
        var zdcd=$("#zdcd").val();
        var zdbeizhu=$("#zdbeizhu").val();
        
        if(zdname&& zdtype&&zdcd&&zdbeizhu)
        {
           var str= {"zdname":zdname,"zdtype":zdtype,"zdcd":zdcd,"zdbeizhu":zdbeizhu};
           zdstr.push(str);
           console.log(zdstr);
        }
        else{
            layer.msg("请完整填写字段信息",{icon:2,time:1500});
            return false;
        }
        addstr();
     });

     function addstr()
     {
        $("#zdtr").html('');
         zdstr.forEach((e,i) => {
            $("#zdtr").append('<tr><td>'+e.zdname+'</td><td>'+e.zdtype+'</td><td>'+e.zdcd+'</td><td>'+e.zdbeizhu+',,'+i+'</td><td onclick="delzdstr('+i+')">X</td></tr>');
         });
        
     }
     
     window.delzdstr=function(index)
     {
         if(index>=0)
         {
            zdstr.splice(index,1);
            console.log(index,zdstr)
           addstr();
         }
     }
})
</script>
</body>
</html>